<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: rgba(197,204,178,60%);
			}
			a{
				transition: 1s;
				font-size: 25px;
				background-color: rgba(199,255,198,50%);
				border-radius: 10%;
				font-family: "微软雅黑";
			}
			a:hover{
				font-size: 30px;
				padding: 5px;
				box-shadow: #1B6D85;
			}
		</style>
		<script>
			var x=10;
			var y=20;
			console.log('x+y='+(x+y));
			var a=10,b=20;
			console.log(a*b);
			var x='来呀官人';
			console.log(x);
			console.log(typeof(x));
			
		</script>
	</head>
	<body>
		<h3>JavaScript 访问DOM树案例</h3>
		<h5>tagName、className、name、id</h5>
		<a href="http://www.taobao.com">淘宝</a>
		<a class="jd" href="http://www.jd.com">京东</a>
		<a name="pdd" href="http://www.pinduoduo.com">拼多多</a>
		<a id="mt" href="http://www.meituan.com"> 美团</a>
		<!--页面上使用 JavaScript，通过 script 标签来实现-->
		<script type="text/javascript">
			console.log('使用 js 获取页面元素内容');
			document.getElementsByTagName('a');
			console.log(document.getElementsByTagName('a')[0]);
			console.log(document.getElementsByTagName('a')[0].innerText);
			console.log(document.getElementsByClassName('jd')[0].innerText);
			console.log(document.getElementsByClassName('jd')[0].href);
			console.log(document.getElementsByName('pdd')[0].innerText);
			console.log(document.getElementsByName('pdd')[0].href);
			console.log(document.getElementById('mt').innerText);
			console.log(document.getElementById('mt').href);
			document.getElementsByTagName('a')[0].innerText='天猫';
			var a = document.getElementsByTagName('a')[0];
			a.innerText = '淘宝';
		</script>
	</body>
</html>


